<%@page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>
<%@include file="/includes/taglibs.jsp"%>
<%@page import="com.feib.soeasy.util.UserUtil"%>
<c:choose>
	<c:when test="${null != actionBean.queryPaymentResult && not empty actionBean.queryPaymentResult.paginatedList}">
		<c:set var="lastPageNumber" value="${actionBean.queryPaymentResult.totalPageCount}"/>
		<c:set var="currentPageNumber" value="${actionBean.queryPaymentResult.pageNumber}"/>
		<c:set var="prePageNumber" value="${actionBean.queryPaymentResult.pageNumber - 1}"/>
		<c:set var="nextPageNumber" value="${actionBean.queryPaymentResult.pageNumber + 1}"/>
		<c:set var="filePk" value="${actionBean.qryUploadFile.uploadFilePk}"/>
		
	
					<div id="paginationBar" colspan="6">
						<input type="button" id="payment.firstPageBtn" value="第一頁" <c:out value='${prePageNumber<=0 ? "disabled": "" }'/> />
						<input type="button" id="payment.prePageBtn" value="上一頁" <c:out value='${prePageNumber<=0 ? "disabled": "" }'/> />
						第 <input type="text" id="payment.currentPageText" value="${currentPageNumber }" size="3" maxlength="4"> / ${lastPageNumber} 頁
						<input type="button" id="payment.nextPageBtn" value="下一頁" <c:out value='${lastPageNumber<nextPageNumber ? "disabled": "" }'/> />
						<input type="button" id="payment.lastPageBtn" value="最末頁" <c:out value='${lastPageNumber<=currentPageNumber ? "disabled": "" }'/> />
					</div>
				
		
		
		<table id="paymentListTable">
				
				<c:forEach items="${actionBean.queryPaymentResult.paginatedList}" var="viewObj" varStatus="rowstat">
				<tr>
					<td colspan="6">
						<table>				
							
							<tr>
								<th>繳費帳號</th>
								<td><c:out value="${viewObj.virtualAccount}"/></td>
								<th>姓名</th>
								<td><c:out value="${viewObj.payerName}"/></td>
								<th>總金額</th>
								<td align="right"><fmt:formatNumber value="${viewObj.totalAmount}" pattern="##,###" /></td>
						<th id="trigger-${actionBean.queryPaymentResult.firstIndexForCurrentPage + rowstat.index+1 }" align="center">+</th>
							
							</tr>
						
						</table>
					</td>
				</tr>
					<tr id="trDetail-${actionBean.queryPaymentResult.firstIndexForCurrentPage + rowstat.index+1 }" style="display: none;">
				<td colspan="11" >
					<table>
						<tr>
								<td colspan="6" class="paymentHeader"><c:out value="${viewObj.paymentName}"/> - ${actionBean.queryPaymentResult.firstIndexForCurrentPage + rowstat.index+1 }</td>
							</tr>
							<tr>
								<th>繳費帳號</th>
								<td><c:out value="${viewObj.virtualAccount}"/></td>
								<th>姓名</th>
								<td><c:out value="${viewObj.payerName}"/></td>
								<th>總金額</th>
								<td align="right"><fmt:formatNumber value="${viewObj.totalAmount}" pattern="##,###" /></td>
							</tr>
							<tr>
								<th colspan="6">繳費明細</th>
							</tr>
							<c:set var="old" value="${true}"/>
							<c:forEach items="${viewObj.paymentItems}" var="paymentItem" varStatus="rowstat1">
							<c:if test="${paymentItem.amount != 0 }">
								<c:if test="${old}"><tr></c:if>
									<th><c:out value="${paymentItem.itemName}"/></th>
									<td colspan="2" align="right"><fmt:formatNumber value="${paymentItem.amount}" pattern="##,###" /></td>
									<c:if test="${not old}"> </tr> </c:if>
								<c:set var="old" value="${not old }"/>
							</c:if>
							</c:forEach>
							<%//old == flase =>基數個，需要再補空白欄位與結束符號 %>
							<c:if test="${not old}"><th>&nbsp;</th><td colspan="2">&nbsp;</td></tr></c:if>
						</table>
				</td>
			</tr>
				</c:forEach>
				
		</table>			
		<script type="text/javascript">
		<!--
		$(document).ready(function() {
			
			$("[id^='trigger-']").click(function() {
				var idx = this.id.substring(8);				
				var trId = "#trDetail-" + idx;
				$(trId).toggle();
				if ("+" == $(this).html())
					$(this).html("-");
				else
					$(this).html("+");
			});
			
			$("[id^='payment.firstPageBtn']").click(function() {
				doQueryPaymentsAction(<c:out value='${filePk}'/>, 1);
			});
			
			$("[id^='payment.prePageBtn']").click(function() {
				doQueryPaymentsAction(<c:out value='${filePk}'/>, <c:out value='${prePageNumber}'/>);
			});
			
			$("[id^='payment.nextPageBtn']").click(function() {
				doQueryPaymentsAction(<c:out value='${filePk}'/>, <c:out value='${nextPageNumber}'/>);
			});
			
			$("[id^='payment.lastPageBtn']").click(function() {
				doQueryPaymentsAction(<c:out value='${filePk}'/>, <c:out value='${lastPageNumber}'/>);
			});
			
			$("[id^='payment.currentPageText']").change(function() {

				var value = this.value;
				if (value != ''){
					value = value.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
					var intRegex = /^\d+$/;
					if(!intRegex.test(value)) {
						alert('頁數必須是整數');
						return ;
					}
					
					value = parseInt(value, 10);
					
					if (value < 1){
						alert('頁數必須是大於1');
						return ;
					}
					else if (value > <c:out value='${lastPageNumber}'/>){
						alert('頁數必須是小於總頁數 (<c:out value='${lastPageNumber}'/>)');
						return ;
					}
					else if (value != <c:out value='${currentPageNumber}'/>){
						doQueryPaymentsAction(<c:out value='${filePk}'/>, value);
					}
				}
				else{
					alert('頁數不可為空白');
					return;
				}
			});
			
			$( "#paymentsItemDiv" ).dialog( "destroy" );
			$( "#paymentsItemDiv" ).dialog({  title:'整批帳單下載' ,width: 600, resizable: true, modal: true  });
		});
		//-->
		</script>
	</c:when>
	<c:otherwise>
			<table id="listTable">
				<tr>
					<th>
						查無資料
					</th>
				</tr>
			</table>
		<script type="text/javascript">
		<!--
		$(document).ready(function() {
			$( "#paymentsItemDiv" ).dialog( "destroy" );
			$( "#paymentsItemDiv" ).dialog({  title:'整批帳單下載' ,width: 300, height : 100, resizable: false, modal: true  });
		});
		//-->
		</script>
	</c:otherwise>
</c:choose>